<!DOCTYPE html>
<!-- The border should be dotted, minimal dashes, and should extend
     all the way to the corners of the background.
-->
<style>
  .bordered {
    margin-top: 3px;
    height: 10px;
    background-color: lightgreen;
    background-clip: border-box;
   }
  .dot_6 {
    width: 66px;
    height: 66px;
   }
  .dot_5 {
    width: 65px;
    height: 65px;
   }
  .dot_4 {
    width: 64px;
    height: 64px;
   }
  .dot_3 {
    width: 63px;
    height: 63px;
   }
  .dot_2 {
    width: 62px;
    height: 62px;
   }
  .dot_1 {
    width: 61px;
    height: 61px;
   }
</style>
<div>
  <div style="display: inline-block;">
    <div class="bordered dot_6" style="border: dotted 1px black;"></div>
    <div class="bordered dot_6" style="border: dotted 2px black;"></div>
    <div class="bordered dot_6" style="border: dotted 3px black;"></div>
  </div>
  <div style="display: inline-block;">
    <div class="bordered dot_5" style="border: dotted 1px black;"></div>
    <div class="bordered dot_5" style="border: dotted 2px black;"></div>
    <div class="bordered dot_5" style="border: dotted 3px black;"></div>
  </div>
  <div style="display: inline-block;">
    <div class="bordered dot_4" style="border: dotted 1px black;"></div>
    <div class="bordered dot_4" style="border: dotted 2px black;"></div>
    <div class="bordered dot_4" style="border: dotted 3px black;"></div>
  </div>
</div>
<div>
  <div style="display: inline-block;">
    <div class="bordered dot_3" style="border: dotted 1px black;"></div>
    <div class="bordered dot_3" style="border: dotted 2px black;"></div>
    <div class="bordered dot_3" style="border: dotted 3px black;"></div>
  </div>
  <div style="display: inline-block;">
    <div class="bordered dot_2" style="border: dotted 1px black;"></div>
    <div class="bordered dot_2" style="border: dotted 2px black;"></div>
    <div class="bordered dot_2" style="border: dotted 3px black;"></div>
  </div>
  <div style="display: inline-block;">
    <div class="bordered dot_1" style="border: dotted 1px black;"></div>
    <div class="bordered dot_1" style="border: dotted 2px black;"></div>
    <div class="bordered dot_1" style="border: dotted 3px black;"></div>
  </div>
</div>
